<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:replace="~{layout :: html}">
<head>
    <title>用户列表 - 用户管理系统</title>
</head>
<body>
    <div th:fragment="content">
        <!-- 操作栏 -->
        <div class="row mb-3">
            <div class="col-md-6">
                <a th:href="@{/user/add}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> 添加用户
                </a>
                <button type="button" class="btn btn-danger" onclick="batchDelete()">
                    <i class="fas fa-trash"></i> 批量删除
                </button>
            </div>
            <div class="col-md-6">
                <!-- 搜索框 -->
                <form th:action="@{/user/list}" method="get" class="d-flex">
                    <input type="text" name="keyword" th:value="${keyword}" class="form-control me-2" placeholder="搜索用户名或邮箱">
                    <button type="submit" class="btn btn-outline-secondary">搜索</button>
                </form>
            </div>
        </div>

        <!-- 消息提示 -->
        <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
            <span th:text="${successMessage}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <span th:text="${errorMessage}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>

        <!-- 用户列表 -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">用户列表</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                                </th>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>年龄</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="user : ${userPage.records}">
                                <td>
                                    <input type="checkbox" name="userIds" th:value="${user.id}">
                                </td>
                                <td th:text="${user.id}"></td>
                                <td th:text="${user.name}"></td>
                                <td th:text="${user.email}"></td>
                                <td th:text="${user.age}"></td>
                                <td th:text="${#temporals.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                <td>
                                    <a th:href="@{/user/info/{id}(id=${user.id})}" class="btn btn-sm btn-info">查看</a>
                                    <a th:href="@{/user/edit/{id}(id=${user.id})}" class="btn btn-sm btn-warning">编辑</a>
                                    <button type="button" class="btn btn-sm btn-danger" 
                                            th:onclick="'confirmDelete(' + ${user.id} + ', \'' + ${user.name} + '\')'">
                                        删除
                                    </button>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(userPage.records)}">
                                <td colspan="7" class="text-center">暂无数据</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <nav th:if="${userPage.pages > 1}">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${userPage.current == 1} ? 'disabled'">
                            <a class="page-link" th:href="@{/user/list(pageNum=${userPage.current - 1}, pageSize=${userPage.size}, keyword=${keyword})}">上一页</a>
                        </li>
                        <li class="page-item" th:each="pageNum : ${#numbers.sequence(1, userPage.pages)}" 
                            th:classappend="${pageNum == userPage.current} ? 'active'">
                            <a class="page-link" th:href="@{/user/list(pageNum=${pageNum}, pageSize=${userPage.size}, keyword=${keyword})}" 
                               th:text="${pageNum}"></a>
                        </li>
                        <li class="page-item" th:classappend="${userPage.current == userPage.pages} ? 'disabled'">
                            <a class="page-link" th:href="@{/user/list(pageNum=${userPage.current + 1}, pageSize=${userPage.size}, keyword=${keyword})}">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <script th:fragment="scripts">
        // 全选/取消全选
        function toggleSelectAll() {
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('input[name="userIds"]');
            checkboxes.forEach(checkbox => {
                checkbox.checked = selectAll.checked;
            });
        }

        // 批量删除
        function batchDelete() {
            const checkboxes = document.querySelectorAll('input[name="userIds"]:checked');
            if (checkboxes.length === 0) {
                alert('请选择要删除的用户');
                return;
            }
            
            if (confirm('确定要删除选中的 ' + checkboxes.length + ' 个用户吗？')) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/user/batchDelete';
                
                checkboxes.forEach(checkbox => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'ids';
                    input.value = checkbox.value;
                    form.appendChild(input);
                });
                
                document.body.appendChild(form);
                form.submit();
            }
        }

        // 确认删除单个用户
        function confirmDelete(userId, userName) {
            if (confirm('确定要删除用户 "' + userName + '" 吗？')) {
                window.location.href = '/user/delete/' + userId;
            }
        }
    </script>
</body>
</html>
